<template>
    <view class="page-body">
        <view>
            <scroll-view id="tab-bar" class="swiper-tab" scroll-x :scroll-left="scrollLeft">
                <block v-for="(tab,index) in tabs" :key="tab.id">
                    <view :class="['swiper-tab-list',currentTab==index ? 'on' : '']" :id="tab.id" :data-current="index" @tap="swichNav">{{tab.name}}</view>
                </block>
            </scroll-view>
        </view>
        <view class="page-section">
            <view class="uni-flex uni-row">
                <view class="uni-list-cell">
                    <view class="list-left">
                        排课选择:
                    </view>
                    <view class="uni-list-cell-db">
                        <picker @change="bindPickerChange" :value="index" :range="array">
                            <view class="uni-input">{{array[index]}}</view>
                        </picker>
                    </view>
                </view>
				<view class="uni-list-cell">
					<view class="list-left">
						排课选择:
					</view>
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{array[index]}}</view>
						</picker>
					</view>
				</view>
				<view class="uni-list-cell">
					<view class="list-left">
						排课选择:
					</view>
					<view class="uni-list-cell-db">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{array[index]}}</view>
						</picker>
					</view>
				</view>
            </view>
        </view>
        <view class="page-section">
            <view class="uni-list">
                <view class="uni-list-cell search-class-input ">
                    <input class="uni-input " maxlength="10" placeholder="请输入班级名称" />
                </view>
            </view>
        </view>
        <view class="page-section">
            <view class="uni-flex uni-row class-list-card" style="justify-content: space-between;">
                <view class="uni-flex uni-column">
                    <text class="class-name">刚</text>
                    <text class="class-kecheng">语文等1个课程</text>
                    <text class="class-jiaoshi">小班等一个教师</text>
                </view>
                <view class="uni-flex uni-row" style="padding-right: 20px;">
                    <image class="image-header" src="../../../static/head.png"></image>
					<image class="image-header" src="../../../static/head.png"></image>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                array: ['中国', '美国', '巴西', '日本'],
                index: 0,
                date: '2016-09-01',
                time: '12:01',
                title: 'tabbar',
                scrollLeft: 0,
                isClickChange: false,
                currentTab: 0,
                tabs: [{
                    name: '按',
                    id: 'guanzhu'
                }, {
                    name: '推荐',
                    id: 'tuijian'
                }]
            }
        },
        method: {
			swichNav: async function (e) { //点击tab-bar
				if (this.currentTab === e.target.dataset.current) {
					return false;
				} else {
					let tabBar = await this.getWidth("tab-bar"),
						tabBarScrollLeft = tabBar.scrollLeft; //点击的时候记录并设置scrollLeft
					this.scrollLeft = tabBarScrollLeft;
					this.isClickChange = true;
					this.currentTab = e.target.dataset.current
				}
			},
            bindPickerChange: function (e) {
                console.log('picker发送选择改变，携带值为', e.target.value)
                this.index = e.target.value
            },
            bindDateChange: function (e) {
                this.date = e.target.value
            },
            bindTimeChange: function (e) {
                this.time = e.target.value
            }
        },
    }
</script>

<style scoped >
    @import "../../../common/uni.css";
    page {
        display: flex;
    }
	.search-class-input {
		justify-content: center;
		padding-left: 10px;
		margin-left: 5px;
		margin-right: 5px;
		border-radius: 3px;
		color: #353535;
		background-color: #D9D9D9;
		
	}
	.class-name {
		color: #000000;
		font-size: 30px;
	}
	.class-kecheng {
		color: #888888;
		font-size: 25px;
		
	}
	.class-jiaoshi{
		color: #888888;
		font-size: 25px;
		
	}
	.class-list-card {
		background-color: #FFFFFF;
		margin-left: 10px;
		margin-right: 10px;
		margin-top: 10px;
		margin-bottom: 10px;
		padding: 10px;
	}

    .image-header {
        width: 40px;
        height: 40px;
    }

    .index {
        display: flex;
        flex: 1;
        flex-direction: column;
        overflow: hidden;
        height: 100%;
    }

    .index-bd {
        width: 750px;
        height: 100%;
    }

    .swiper-tab {
        width: 100%;
        white-space: nowrap;
        line-height: 64px;
        height: 64px;
    }


    .swiper-tab-list {
        font-size: 30px;
        width: 150px;
        display: inline-block;
        text-align: center;
        color: #777777;
    }
	

    .on {
        color: #FF0000;
        border-bottom: 5px solid #FF0000;
    }

    .swiper-box {
        flex: 1;
        width: 100%;
        height: 100%;
    }

    .swiper-box view {
        text-align: center;
    }

    .tab-list {
        width: 100%;
        height: 90px;
        line-height: 90px;
        text-align: left;
        border-bottom: 2px solid #EFEFF4;
    }
</style>
